<template>
  <el-dialog
    title="导入"
    :model-value="dialogVisible"
    align-center
    width="600px"
    @close="$emit('close')"
  >
    <el-form :model="importForm" ref="importFormRef" label-width="100px" :rules="importRules">
      <el-form-item label="导入文件:" prop="file">
        <el-upload
          v-model:file-list="importForm.file"
          class="upload-demo"
          action=""
          :auto-upload="false"
          :on-change="handleSuccess"
          :on-remove="handleRemove"
          :limit="1"
          :on-exceed="handleExceed"
          drag
          style="width: 100%"
        >
          <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
          <div class="el-upload__text"> 将文件拖至此处，或<em>点击上传</em> </div>
          <template #tip>
            <Icon icon="svg-icon:tips" />
            <span style="color: #cccccc">
              仅允许上传单个文件，点此<el-button type="primary" link @click="handleDownload"
                >下载文件模版</el-button
              >
            </span>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="归属机构:" prop="deptId">
        <el-cascader
          ref="deptCascader"
          v-model="importForm.deptId"
          placeholder="请选择归属机构"
          :props="cascaderProps"
          :options="options"
          filterable
          clearable
          value-on-clear=""
          :filter-method="sysFilterMethod"
        />
      </el-form-item>
      <el-form-item label="归属系统:" prop="sysId">
        <el-cascader
          ref="systemCascader"
          v-model="importForm.sysId"
          placeholder="请选择归属系统"
          :props="systemCascaderProps"
          :options="systemList"
          filterable
          clearable
          value-on-clear=""
          :filter-method="sysFilterMethod"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleImport">确认</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'
import { sysFilterMethod } from '@/utils/selectFilter'
import download from '@/utils/download'
import { downloadTemplate, importDataSource } from '@/api/dataSourceManage/index'
const importFormRef = ref()
const { proxy } = getCurrentInstance()
const emit = defineEmits('close')
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  options: {
    type: Object,
    default: () => {}
  },
  systemList: {
    type: Object,
    default: () => {}
  },
  datasourceType: {
    type: Number || String,
    default: 1
  }
})
const importForm = ref({
  deptId: '',
  sysId: ''
})
const cascaderProps = ref({
  checkStrictly: true,
  label: 'name',
  value: 'id',
  children: 'children',
  emitPath: false
})
const systemCascaderProps = {
  checkStrictly: true,
  label: 'value',
  value: 'id',
  children: 'children',
  emitPath: false
}

const isRequired = computed(() => {
  return !importForm.value.deptId && !importForm.value.sysId
})
const importRules = computed(() => ({
  deptId: [{ required: isRequired.value, message: '归属机构不能为空', trigger: 'change' }],
  sysId: [{ required: isRequired.value, message: '归属系统不能为空', trigger: 'change' }],
  file: [{ required: true, message: '请上传文件', trigger: ['change', 'blur'] }]
}))

const handleExceed = () => {
  ElMessage.error('只能上传一个文件')
}

const handleDownload = async () => {
  const data = await downloadTemplate()
  download.excel(data, '数据源导入模版.xls')
}
const handleRemove = () => {
  importForm.file = null
}

const handleImport = async () => {
  const data = await importFormRef.value.validate()
  if (!data) {
    return
  }
  const formData = new FormData()
  const params = {
    ...importForm.value,
    file: importForm.value.file[0].raw,
    datasourceType: props.datasourceType,
    deptId: importForm.value.deptId || 0
  }
  for (let param in params) {
    console.log(params[param])
    formData.append(param, params[param])
  }
  // 导入
  const { code } = await importDataSource(formData)
  if (code == 200) {
    importFormRef.value.resetFields()
    emit('close', true)
    search()
  }
}
</script>

<style lang="scss" scoped></style>
